<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <div class="cil__base-block--form" *ngIf="addMinusService.validateForms.length === 0">
    <ng-container *ngIf="!pageService.isChannelAdd">
      <app-new-page-header
        [title]="'BIZ.ACQUIRER.OTHER.CHANNEL.PAYMENT_CHANNEL' | i18n"
        [index]="-1"
        (addClick)="addMinusService.addItem($event)"
        (minusClick)="addMinusService.minusItem($event)"></app-new-page-header>
    </ng-container>

    <ng-container *ngIf="pageService.isChannelAdd">
      <app-detail-header [title]="'BIZ.ACQUIRER.OTHER.EC_CHANNELS' | i18n" [ifEditable]="false"></app-detail-header>
    </ng-container>
  </div>
  <nz-spin *ngIf="loading"></nz-spin>
  <ng-container *ngFor="let validateForm of addMinusService.validateForms; let i = index">
    <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
      <ng-container *ngIf="!pageService.isChannelAdd">
        <app-new-page-header
          [title]="computeChannelSectionHeader(i)"
          [index]="i"
          (addClick)="addMinusService.addItem($event)"
          (minusClick)="addMinusService.minusItem($event)"></app-new-page-header>
      </ng-container>

      <ng-container *ngIf="pageService.isChannelAdd">
        <app-detail-header
          [title]="'BIZ.ACQUIRER.OTHER.CHANNEL.CHANNEL_CONFIG' | i18n"
          [ifEditable]="false"></app-detail-header>
      </ng-container>

      <div nz-row [nzGutter]="24">
        <ng-container *ngFor="let item of addMinusService.formItemsArr[i]">
          <div nz-col [nzSpan]="(item.asyncSpan | async) || 12" style="min-height: 0;">
            <!-- 币种选择 -->
            <nz-form-item *ngIf="item.type === formItemType.CURRENCY_SELECT">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <app-currency-select
                  [disabled]="item.disable"
                  [formControlName]="item.formControlName"
                  [multiple]="true"></app-currency-select>
                <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                  <ng-container *ngIf="validateForm.get(item.formControlName).getError('required'); else second">{{
                    item.errTips && item.errTips['required']
                  }}</ng-container>
                  <ng-template #second>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength'); else third">{{
                      item.errTips && item.errTips['minLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #third>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength'); else fourth">{{
                      item.errTips && item.errTips['maxLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fourth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{
                      item.errTips && item.errTips['pattern']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fifth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{
                      item.errTip
                    }}</ng-container>
                  </ng-template>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <!-- 多选框 -->
            <nz-form-item
              *ngIf="item.type === formItemType.SELECT && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <nz-select
                  [nzMaxTagCount]="5"
                  [nzDisabled]="item.disable"
                  [compareWith]="item.compareFn"
                  [nzMode]="item.multiple || 'default'"
                  [formControlName]="item.formControlName"
                  [nzAllowClear]="item.allowClear"
                  name="item.formControlName"
                  (ngModelChange)="item.change && item.change($event, i)">
                  <nz-option
                    *ngFor="let op of item.options"
                    [nzLabel]="op.value || op.label"
                    [nzValue]="op.value"
                    nzCustomContent>
                    <span>{{ op.label }}</span>
                  </nz-option>
                </nz-select>
                <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                  <ng-container *ngIf="validateForm.get(item.formControlName).getError('required'); else second">{{
                    item.errTips && item.errTips['required']
                  }}</ng-container>
                  <ng-template #second>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength'); else third">{{
                      item.errTips && item.errTips['minLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #third>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength'); else fourth">{{
                      item.errTips && item.errTips['maxLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fourth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{
                      item.errTips && item.errTips['pattern']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fifth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{
                      item.errTip
                    }}</ng-container>
                  </ng-template>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <!-- switch 开关-->
            <nz-form-item *ngIf="item.type === formItemType.SWITCH && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <nz-switch
                  [nzDisabled]="item.disable"
                  [formControlName]="item.formControlName"
                  (ngModelChange)="item.change($event)"></nz-switch>
                <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                  <ng-container *ngIf="validateForm.get(item.formControlName).getError('required'); else second">{{
                    item.errTips && item.errTips['required']
                  }}</ng-container>
                  <ng-template #second>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength'); else third">{{
                      item.errTips && item.errTips['minLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #third>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength'); else fourth">{{
                      item.errTips && item.errTips['maxLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fourth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{
                      item.errTips && item.errTips['pattern']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fifth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{
                      item.errTip
                    }}</ng-container>
                  </ng-template>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <!-- 文件上传 -->
            <nz-form-item *ngIf="item.type === formItemType.FILE && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control nzHasFeedback="true">
                <app-new-upload-file
                  [disable]="item.disable"
                  [(content)]="validateForm.get(item.formControlName).value"></app-new-upload-file>
                <nz-form-explain
                  *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors">
                  <ng-container>{{ item.errTip }}</ng-container>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <!-- RADIO -->
            <nz-form-item *ngIf="item.type === formItemType.RADIO && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <nz-radio-group [nzDisabled]="item.disable" [formControlName]="item.formControlName">
                  <label nz-radio *ngFor="let op of item.options" [nzValue]="op.value">{{ op.label }}</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>

            <!-- input group -->
            <nz-form-item *ngIf="item.type === formItemType.INPUTGROUP && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <nz-input-group [nzAddOnAfter]="item.addAfter" [ngStyle]="{ width: '100%' }">
                  <input
                    nz-input
                    [attr.disabled]="item.disable"
                    [type]="item.inputType"
                    [formControlName]="item.formControlName"
                    [name]="item.formControlName"
                    (input)="item.change ? item.change($event, i) : null" />
                </nz-input-group>
                <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                  <ng-container *ngIf="validateForm.get(item.formControlName).getError('required'); else second">{{
                    item.errTips && item.errTips['required']
                  }}</ng-container>
                  <ng-template #second>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength'); else third">{{
                      item.errTips && item.errTips['minLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #third>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength'); else fourth">{{
                      item.errTips && item.errTips['maxLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fourth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{
                      item.errTips && item.errTips['pattern']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fifth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{
                      item.errTip
                    }}</ng-container>
                  </ng-template>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <!-- input -->
            <nz-form-item *ngIf="!item.type && !item.hide && !(item.asyncHidden | async)">
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control nzHasFeedback="true">
                <input
                  nz-input
                  [attr.disabled]="item.disable"
                  [type]="item.inputType"
                  [formControlName]="item.formControlName"
                  [name]="item.formControlName"
                  (blur)="item.change ? item.change($event, i) : null" />
                <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                  <ng-container *ngIf="validateForm.get(item.formControlName).getError('required'); else second">{{
                    item.errTips && item.errTips['required']
                  }}</ng-container>
                  <ng-template #second>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength'); else third">{{
                      item.errTips && item.errTips['minLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #third>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength'); else fourth">{{
                      item.errTips && item.errTips['maxLength']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fourth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{
                      item.errTips && item.errTips['pattern']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #fifth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('existed'); else sixth">{{
                      item.errTips && item.errTips['existed']
                    }}</ng-container>
                  </ng-template>
                  <ng-template #sixth>
                    <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{
                      item.errTip
                    }}</ng-container>
                  </ng-template>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
          </div>
        </ng-container>
      </div>
    </form>
  </ng-container>
</div>
